<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>12_指令_自定义指令</title>
  </head>
  <body>
    <!--
1. 注册全局指令
  Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
  })
2. 注册局部指令
  directives : {
    'my-directive' : {
        bind (el, binding) {
          el.innerHTML = binding.value.toupperCase()
        }
    }
  }
3. 使用指令
  v-my-directive='xxx'
-->
    <!--
需求: 自定义2个指令
  1. 功能类型于v-text, 但转换为全大写
  2. 功能类型于v-text, 但转换为全小写
-->
    <div id="root">
      <p v-lower-case="msg"></p>
      <p v-upper-case="msg"></p>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      // 全局指令
      Vue.directive("upper-case", {
        bind(el, binding) {
          el.textContent = binding.value.toUpperCase();
        },
      });

      new Vue({
        el: "#root",
        data: {
          msg: "Hello Atguigu",
        },
        // 局部指令
        directives: {
          // v-lower-case
          // "lower-case"(el, binding) {
          //   /*
          //     el 元素：绑定指令的元素
          //     binding: 包含指令的信息
          //       def: {bind: ƒ, update: ƒ}
          //       expression: "msg"
          //       modifiers: {}
          //       name: "lower-case"
          //       rawName: "v-lower-case"
          //       value: "Hello Atguigu"
          //   */
          //   // console.log(el, binding);
          //   el.textContent = binding.value.toLowerCase();
          // },
          "lower-case": {
            bind(el, binding) {
              el.textContent = binding.value.toLowerCase();
            },
            // update() {

            // }
          },
        },
      });
    </script>
  </body>
</html>
